<template>
  <TokenFixer />
  <a-layout class="main-layout">
    <!-- 头部 -->
<!--    <a-layout-header class="header">-->
      <Header />
<!--    </a-layout-header>-->
<!--    <HeaderTabs/>-->
    <div class="container">
      <a-layout-content class="content">
        <!-- 根据路由决定显示内容 -->
        <template v-if="isUserRoute">
          <!-- 用户中心响应式布局 -->
          <div class="user-layout">
            <!-- 左侧边栏/顶部菜单 (在小屏幕上转为水平菜单) -->
            <aside class="user-sidebar">
              <a-menu
                :mode="isMobileView ? 'horizontal' : 'inline'"
                :selectedKeys="[activeUserMenu]"
                @select="handleUserMenuSelect"
                style="height: 100%;"
              >
                <a-menu-item key="profile">
                  <template #icon><UserOutlined /></template>
                  <span>Profile</span>
                </a-menu-item>
                <a-menu-item key="address">
                  <template #icon><EnvironmentOutlined /></template>
                  <span>My Address</span>
                </a-menu-item>
                <a-menu-item key="orders">
                  <template #icon><ShoppingOutlined /></template>
                  <span>My Orders</span>
                </a-menu-item>
                <a-menu-item key="cart">
                  <template #icon><ShoppingCartOutlined /></template>
                  <span>My Cart</span>
                </a-menu-item>
                <a-menu-item key="wishlist">
                  <template #icon><StarOutlined /></template>
                  <span>Wishlist</span>
                </a-menu-item>
                <a-menu-item key="history">
                  <template #icon><HistoryOutlined /></template>
                  <span>Browsing History</span>
                </a-menu-item>
                <a-menu-item key="points">
                  <template #icon><GiftOutlined /></template>
                  <span>My Points</span>
                </a-menu-item>
                <a-menu-item key="coupons">
                  <template #icon><TagsOutlined /></template>
                  <span>My Coupons</span>
                </a-menu-item>
                <a-menu-item key="message">
                  <template #icon><BellOutlined /></template>
                  <span>Notifications</span>
                </a-menu-item>
              </a-menu>
            </aside>

            <!-- 右侧/下方内容区 -->
            <div class="user-main">
              <!-- 标签页导航 -->
              <a-tabs
                v-model:activeKey="activeTabKey"
                type="editable-card"
                @edit="onTabEdit"
                @change="handleTabChange"
              >
                <a-tab-pane
                  v-for="tab in tabs"
                  :key="tab.key"
                  :tab="tab.title"
                  :closable="tab.closable"
                />
              </a-tabs>

              <!-- 用户中心内容 -->
              <div class="tab-content">
                <router-view />
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <!-- 常规内容布局 -->
          <router-view></router-view>
        </template>
      </a-layout-content>

      <!-- 底部 -->
      <a-layout-footer class="footer">
        <Footer />

        <div class="footer-bottom">
          <a-row :gutter="[16, 16]" type="flex" justify="space-between" align="middle">
            <a-col :xs="24" :sm="8" :md="8" :lg="8" class="footer-item">
              <div class="location">
                <!--              <environment-outlined />-->
                <!--              <a href="#">United States</a>-->
                <div class="links">
                  <a href="/terms">Terms & Conditions</a>
                  <a href="/privacypolicy">Privacy Policy</a>
                  <!--                <a href="#">Your Privacy Choices</a>-->
                </div>
              </div>
            </a-col>

            <a-col :xs="24" :sm="8" :md="8" :lg="8" class="footer-item">
              <div class="copyright">
                © LANNUAN? Inc. 2023 All rights reserved.
              </div>
            </a-col>

            <a-col :xs="24" :sm="8" :md="8" :lg="8" class="footer-item">
              <div class="social-icons">
                <a-space>
                  <a href="#"><instagram-outlined /></a>
                  <a href="#"><facebook-outlined /></a>
                  <!--<a href="#"><tiktok-outlined /></a>-->
                  <a href="#"><youtube-outlined /></a>
                  <a href="#"><twitter-outlined /></a>
                </a-space>
              </div>
            </a-col>
          </a-row>
        </div>

      </a-layout-footer>

    </div>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, onMounted, toRef, computed, watch, onBeforeMount, onBeforeUnmount, inject, provide } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import {
  DownOutlined,
  DribbbleOutlined,
  StarOutlined,
  ShoppingCartOutlined,
  ShoppingOutlined,
  UserOutlined,
  SettingOutlined,
  HistoryOutlined,
  EnvironmentOutlined,
  GiftOutlined,
  BellOutlined,
  ClockCircleOutlined,
  TagsOutlined,
  FacebookOutlined, YoutubeOutlined, TwitterOutlined, InstagramOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useUserStore } from '@/store/user';
import { logout } from '@/api/user';
import HeaderTabs from "@/components/HeaderTabs/HeaderTabs.vue";
import type { MenuProps } from 'ant-design-vue'
// import { CURRENCY_TYPE } from '@/config/goodsConst.ts'
import { useCommonStore, useCurrencyStore } from '@/store'
import { getMessageList } from '@/api/user';
import { getUserToken } from '@/utils/cache';
import { get, set } from '@/utils/local';
import TokenFixer from '@/components/TokenFixer.vue';
import SVG_ICONS from "@/assets/SVG_ICONS.ts";
import Header from "@/components/HeaderTabs/Header.vue";
import Footer from "@/layouts/MainFooter.vue"
const commonStore = useCommonStore()
const currencyStore = useCurrencyStore()

// Add ref for cart item count
const cartItemCount = ref(0);

//header背景颜色
let headerBackgroud = ref('#fff')
let textColor = ref('rgba(0, 0, 0, 0.88)')

// Add ref for favorites item count - get from cache
const user_favorites = ref(get('user_favorites') ? get('user_favorites').length : 0);

// 角标动画状态
const cartBadgeAnimate = ref(false);
const favBadgeAnimate = ref(false);

// 上一次的购物车和收藏数量记录
const prevCartCount = ref(0);
const prevFavCount = ref(0);

const router = useRouter();
const route = useRoute();
const { locale } = useI18n();
const userStore = useUserStore();

// const currentLocale = ref(locale.value || 'en');
const currentLocale = ref('en');

let options = computed(() => {
  return currencyStore.currencies;
})

const currentValue = ref(currencyStore.currentCurrency?.id ?? 'USD');

const visible = ref(false);

// 用户中心相关逻辑 - 新增部分
// 判断当前是否在用户中心路由
const isUserRoute = computed(() => {
  if(route.path.startsWith('/user')){
    headerBackgroud.value = '#000';
    textColor.value = '#fff';
  }
  return route.path.startsWith('/user');
});

// 用户中心侧边栏菜单选中项
const activeUserMenu = computed(() => {
  const path = route.path;
  if (path.includes('/user/orders')) return 'orders';
  if (path.includes('/user/settings')) return 'settings';
  if (path.includes('/user/wishlist')) return 'wishlist';
  if (path.includes('/user/history')) return 'history';
  if (path.includes('/user/address')) return 'address';
  if (path.includes('/user/cart')) return 'cart';
  if (path.includes('/user/points')) return 'points';
  if (path.includes('/user/coupons')) return 'coupons';
  if (path.includes('/user/message')) return 'message';
  return 'profile';
});

// 标签页管理
const tabs = ref([
  { key: 'profile', title: 'profile', closable: false, path: '/user/profile' }
]);
const activeTabKey = ref('profile');

// 监听路由变化，更新标签页
watch(() => route.path, (newPath) => {
  if (isUserRoute.value) {
    // 确定当前路由对应的菜单键
    let currentKey = 'profile';
    if (newPath.includes('/user/orders')) currentKey = 'orders';
    if (newPath.includes('/user/settings')) currentKey = 'settings';
    if (newPath.includes('/user/wishlist')) currentKey = 'wishlist';
    if (newPath.includes('/user/address')) currentKey = 'address';
    if (newPath.includes('/user/history')) currentKey = 'history';
    if (newPath.includes('/user/cart')) currentKey = 'cart';
    if (newPath.includes('/user/points')) currentKey = 'points';
    if (newPath.includes('/user/coupons')) currentKey = 'coupons';
    if (newPath.includes('/user/message')) currentKey = 'message';

    // 检查标签是否已存在
    const existingTab = tabs.value.find(tab => tab.key === currentKey);
    if (!existingTab) {
      // 添加新标签
      const title = currentKey === 'orders' ? 'My Orders' :
                   currentKey === 'settings' ? 'Profile' :
                   currentKey === 'wishlist' ? 'Wishlist' :
                   currentKey === 'address' ? 'My Addresses' :
                   currentKey === 'history' ? 'Browsing History' :
                   currentKey === 'cart' ? 'My Cart' :
                   currentKey === 'points' ? 'My Points' :
                   currentKey === 'coupons' ? 'My Coupons' :
                   currentKey === 'message' ? 'My message notification' : 'Personal Profile';

      tabs.value.push({
        key: currentKey,
        title: title,
        closable: currentKey !== 'profile', // 个人资料标签不允许关闭
        path: `/user/${currentKey}`
      });
    }

    // 更新激活的标签
    activeTabKey.value = currentKey;
  }
}, { immediate: true });

// 处理用户菜单选择
function handleUserMenuSelect({ key }) {
  router.push(`/user/${key}`);
}

// 标签页切换
function handleTabChange(key) {
  const tab = tabs.value.find(t => t.key === key);
  if (tab) {
    router.push(tab.path);
  }
}

// 标签页关闭
function onTabEdit(targetKey, action) {
  if (action === 'remove') {
    removeTab(targetKey);
  }
}

// 关闭标签
function removeTab(targetKey) {
  const targetIndex = tabs.value.findIndex(tab => tab.key === targetKey);
  if (targetIndex === -1) return;

  // 如果关闭的是当前激活的标签页，需要激活其他标签页
  if (activeTabKey.value === targetKey) {
    // 默认激活左侧标签，如果没有左侧标签则激活右侧标签
    const newActiveKey = tabs.value[targetIndex - 1]?.key || tabs.value[targetIndex + 1]?.key;

    if (newActiveKey) {
      activeTabKey.value = newActiveKey;
      const tab = tabs.value.find(t => t.key === newActiveKey);
      if (tab && tab.path) {
        router.push(tab.path);
      }
    }
  }

  // 移除标签
  tabs.value = tabs.value.filter(tab => tab.key !== targetKey);
}

// 响应式布局控制
const isMobileView = ref(false);
const windowWidth = ref(window.innerWidth);

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth;
  isMobileView.value = windowWidth.value < 1280; // 更新断点为1280px
};

onBeforeMount(() => {
  handleResize();
  window.addEventListener('resize', handleResize);
});

onMounted(() => {
  // CURRENCY_TYPE.forEach(item => {
  //   options.value.push(item)
  // })
  // currentValue.value = commonStore.currencyValue;

  if(get('locale')){
    currentLocale.value = get('locale')
  }

  // 货币列表
  currencyStore.fetchCurrencies();

  // 初始获取购物车和收藏数量
  cartItemCount.value = get('cartItems') ? get('cartItems').length : 0;
  user_favorites.value = get('user_favorites') ? get('user_favorites').length : 0;

  // 记录初始值
  prevCartCount.value = cartItemCount.value;
  prevFavCount.value = user_favorites.value;

  // 设置定时器每秒更新购物车和收藏数量，确保实时更新
  const badgeUpdateTimer = setInterval(() => {
    // 获取新值
    const newCartCount = get('cartItems') ? get('cartItems').length : 0;
    const newFavCount = get('user_favorites') ? get('user_favorites').length : 0;

    // 检查是否有变化
    if (newCartCount !== prevCartCount.value) {
      // 更新值
      cartItemCount.value = newCartCount;
      prevCartCount.value = newCartCount;

      // 触发动画
      cartBadgeAnimate.value = true;
      setTimeout(() => {
        cartBadgeAnimate.value = false;
      }, 1000);
    }

    // 收藏变化检测
    if (newFavCount !== prevFavCount.value) {
      // 更新值
      user_favorites.value = newFavCount;
      prevFavCount.value = newFavCount;

      // 触发动画
      favBadgeAnimate.value = true;
      setTimeout(() => {
        favBadgeAnimate.value = false;
      }, 1000);
    }
  }, 1000);

  // 如果用户已登录，每5分钟获取一次消息列表
  if (getUserToken()) {
    setInterval(() => {
      getMessageList({
        page: 1,
        page_size: 10
      }).then(res => {
        // 使用set方法存储消息列表
        set('messageList', res.result);
      });
    }, 300000); // 5分钟 (300000毫秒)
  }

  // 组件卸载时清除定时器
  onBeforeUnmount(() => {
    clearInterval(badgeUpdateTimer);
  });

  window.addEventListener('announcement-closed', handleAnnouncementClose);
});

const saveCurrent = () => {
  let obj = options.value.find(item => item.id === currentValue.value)
  if (obj) {
    currencyStore.setCurrency(obj)
    visible.value = false;
    // router.go(0)
  }
}

const handleLocaleChange = (value: any) => {
  currentLocale.value = value;
  locale.value = value;
  // 使用set方法存储语言设置
  set('locale', value);
};

const toggleTheme = (checked: boolean) => {
  const theme = checked ? 'dark' : 'light';
  // 使用set方法存储主题设置
  set('theme', theme);
  document.body.classList.toggle('dark', checked);
};

const handleLogout = async () => {
  try {
    await logout();
    userStore.logout();
    message.success('退出登录成功');
    router.push('/login');
  } catch (error) {
    // 错误已在请求拦截器中处理
  }
};

const goToLogin = () => {
  router.push('/login');
};

function openChange(flag) {
  visible.value = flag;
}



// 跳转到注册页
const goToRegister = () => {
  router.push('/register');
};

// 从 App.vue 注入 openFeedback 方法
const openFeedback = inject('openFeedback');

// 重新提供给子组件，确保在布局组件内能访问到
if (openFeedback) {
  provide('openFeedback', openFeedback);
}

const isAnnouncementVisible = ref(true);

// 监听公告栏关闭事件
const handleAnnouncementClose = () => {
  isAnnouncementVisible.value = false;
};

// 计算容器高度
const containerHeight = computed(() => {
  return isAnnouncementVisible.value
    ? 'calc(100vh - 64px)'
    : 'calc(100vh - 64px + 50px)';
});

// 监听公告栏关闭事件
onMounted(() => {
  window.addEventListener('announcement-closed', handleAnnouncementClose);
});

onBeforeUnmount(() => {
  window.removeEventListener('announcement-closed', handleAnnouncementClose);
});
</script>

<style lang="scss" scoped>

$--header-height: 64px;


.main-layout {
  min-height: 100vh;

  .header {
    padding: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    z-index: 999;
  }
}

.logo {
  display: flex;
  align-items: center;
  //color: v-bind(textColor);
  //font-size: 24px;
  //font-weight: bold;
  //letter-spacing: 0.5px;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 5px;
  transition: all 0.3s;

  &:hover {
    color: #1890ff;
  }
}

.container {
  height: v-bind(containerHeight);
  overflow-y: auto;
}

.content {
  background: #FFFFFF;

  // 用于常规内容的容器样式
  > :deep(div:not(.user-layout)) {

    //max-width: 1700px; /* 移除最大宽度限制 */
    margin: 0 auto;
    // padding: 16px;
  }
}

.footer {
  text-align: center;
  background: #f5f5f5;
  padding: 24px 0px;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
}

:deep(.ant-layout .ant-layout-footer) {
  padding: 30px 0;
  text-align: left;
}

.ant-dropdown-link {
  // color: inherit;
  color: v-bind(textColor);
}


.dropdown-menu-item-group{
  background: #fff;
  padding: 30px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 260px;
  .title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;

  }
  .ant-select{
    margin-bottom: 40px;
    width: 100%;
  }
  .empty-content{
    text-align: center;
    .empty-icon{
      display: flex;
      justify-content: center;
    }
  }
}

.currency {
  .currency-selected {
    font-size: 14px;
    color: v-bind(textColor);
    font-weight: 500;
    margin-left: 8px;
  }
}

/* Dark theme styles */
:global(.dark) {
  .header,
  .footer {
    background: #001529;
    color: rgba(255, 255, 255, 0.85);
  }

  .content {
    background: #141414;
  }
}

// 用户中心布局样式 - 响应式布局
.user-layout {
  display: flex;
  margin: 0;
  padding: 0;
  max-width: 100%;
  min-height: calc(100vh - $--header-height - 97px);
  position: relative;

  // 小屏幕时改为垂直布局
  @media (max-width: 1280px) {
    flex-direction: column;
    padding: 16px 8px;
  }
}

.user-sidebar {
  width: 220px; /* 固定宽度 */
  background: #000; /* 改为黑色背景 */
  border-right: 1px solid #333; /* 深色边框 */
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0;
  //top: 64px;
  height: calc(100vh - 64px);
  max-height: none;
  // z-index: 990;
  padding: 20px 0;
  margin-right: 0;

  :deep(.ant-menu) {
    background: #000;
    color: #fff;
  }

  :deep(.ant-menu-item) {
    color: #fff;

    &:hover {
      background: #333;
      color: #fff !important; /* 确保悬停时文字保持白色 */
    }

    &.ant-menu-item-selected {
      background: #fff;
      color: #000;

      &:hover {
        background: #f5f5f5;
        color: #000 !important; /* 确保选中项悬停时文字保持黑色 */
      }
    }
  }

  // 小屏幕样式
  @media (max-width: 1280px) {
    position: static;
    width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
    max-height: none;
    height: auto;
    padding: 10px;

    :deep(.ant-menu-horizontal) {
      border-bottom: none;
      white-space: nowrap;
      overflow-x: auto;
      background: #000;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #333;
        border-radius: 4px;
      }
    }
  }
}

.user-main {
  flex: 1;
  padding: 0 16px;
  background: #fff;
  overflow: visible;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  margin-left: 220px;
  width: calc(100% - 220px);

  // 小屏幕样式
  @media (max-width: 1280px) {
    width: 100%;
    margin-left: 0;
    padding: 0;
  }

  :deep(.ant-tabs) {
    padding: 12px 16px 0;
    position: relative;
    z-index: 1;
    max-width: none; /* 移除最大宽度限制 */

    .ant-tabs-nav {
      margin-bottom: 16px;

      &::before {
        display: none;
      }
    }

    .ant-tabs-tab {
      color: #666;
      border: none;
      padding: 8px 16px;
      transition: all 0.3s;
      margin: 0 2px;

      &:hover {
        color: #000;
      }

      &.ant-tabs-tab-active {
        background: #000;
        color: #fff;
        border-radius: 4px 4px 0 0;

        .ant-tabs-tab-btn {
          color: #fff;
        }
      }

      .ant-tabs-tab-btn {
        color: inherit;
      }
    }

    .ant-tabs-ink-bar {
      display: none;
    }

    .ant-tabs-nav-wrap {
      border-bottom: 1px solid #000;
    }

    /*.ant-tabs-content-holder {
      border: 1px solid #000;
      border-top: none;
      border-radius: 0 0 4px 4px;
      padding: 16px;
    }*/

    .ant-tabs-tab-remove {
      color: #666;
      margin-left: 8px;

      &:hover {
        color: #000;
      }
    }
  }
}

.tab-content {
  background: #fff;
  padding: 16px;
  margin-top: 0;
  border-radius: 0 0 4px 4px;
  min-height: 300px;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  color: #000;
}

/* Dark theme styles */
:global(.dark) {
  .user-sidebar {
    background: #000;
    border-right-color: #333;
  }

  .tab-content {
    background: #fff;
    color: #000;
  }
}

/* 移除冲突的菜单样式 */
:deep(.ant-menu) {
  min-height: unset;
  border-right: none;
  position: relative;
  z-index: auto;
  width: 100%;
}

:deep(.ant-menu-inline) {
  border-right: none;
}

:deep(.ant-menu-item) {
  margin: 0;
  padding: 2px 0;
  margin-bottom: 8px;
  font-size: 14px;

  .anticon {
    color: #fff;
  }

  &.ant-menu-item-selected {
    .anticon {
      color: #000;
    }
  }
}

/* 用户中心按钮样式 */
:deep(.user-layout) {
  .ant-btn {
    background: #000;
    border-color: #000;
    color: #fff;

    &:hover, &:focus {
      background: #333;
      border-color: #333;
      color: #fff;
    }

    &:active {
      background: #000;
      border-color: #000;
      color: #fff;
    }

    &.ant-btn-primary {
      background: #000;
      border-color: #000;
      color: #fff;

      &:hover, &:focus {
        background: #333;
        border-color: #333;
        color: #fff;
      }

      &:active {
        background: #000;
        border-color: #000;
        color: #fff;
      }
    }

    &.ant-btn-default {
      background: #fff;
      border-color: #000;
      color: #000;

      &:hover, &:focus {
        background: #f5f5f5;
        border-color: #000;
        color: #000;
      }

      &:active {
        background: #fff;
        border-color: #000;
        color: #000;
      }
    }

    &.ant-btn-link {
      background: transparent;
      border-color: transparent;
      color: #000;

      &:hover, &:focus {
        background: transparent;
        border-color: transparent;
        color: #333;
      }

      &:active {
        background: transparent;
        border-color: transparent;
        color: #000;
      }
    }
  }

  /* 表单按钮组样式 */
  .ant-form-item {
    .ant-btn {
      margin-right: 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  /* 表格操作按钮样式 */
  .ant-table {
    .ant-btn {
      padding: 4px 8px;
      font-size: 12px;
    }
  }

  /* 分页按钮样式 */
  .ant-pagination {
    .ant-pagination-item {
      background: #fff;
      border-color: #000;

      a {
        color: #000;
      }

      &:hover {
        border-color: #333;

        a {
          color: #333;
        }
      }

      &.ant-pagination-item-active {
        background: #000;
        border-color: #000;

        a {
          color: #fff;
        }
      }
    }

    .ant-pagination-prev, .ant-pagination-next {
      button {
        background: #fff;
        border-color: #000;
        color: #000;

        &:hover {
          border-color: #333;
          color: #333;
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  :deep(.ant-menu) {
    min-height: auto;
  }
}

/* 角标动画样式 */
:deep(.badge-animate) {
  .ant-badge-count {
    animation: badgePulse 1s ease;
  }
}

@keyframes badgePulse {
  0% {
    transform: scale(1);
    background-color: #108ee9;
    box-shadow: none;
  }

  25% {
    transform: scale(1.3);
    background-color: #f5222d;
    box-shadow: 0 0 8px rgba(245, 34, 45, 0.8);
  }

  50% {
    transform: scale(1.1);
    background-color: #f5222d;
    box-shadow: 0 0 5px rgba(245, 34, 45, 0.5);
  }

  100% {
    transform: scale(1);
    background-color: #108ee9;
    box-shadow: none;
  }
}
.footer-bottom {
  width: 100%;
  background-color: #FFFFFF;
  padding: 20px;
  font-size: 12px;
  border-top: 1px solid #eee;

  .footer-item {
    display: flex;
    justify-content: center;
    text-align: center;

    @media (max-width: 576px) {
      margin-bottom: 15px;
    }
  }

  .location {
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      color: #333;
      margin-left: 5px;
      white-space: nowrap;
      text-decoration: underline;
    }
  }

  .copyright {
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;

    .links {
      margin-top: 5px;

      a {
        color: #666;
        margin: 0 5px;
        white-space: nowrap;
        text-decoration: underline;

        @media (max-width: 768px) {
          display: inline-block;
          margin: 3px 5px;
        }
      }
    }
  }

  .social-icons {
    a {
      color: #333;
      font-size: 20px;
      margin: 0 5px;
      transition: all 0.3s ease;

      &:hover {
        color: #000;
        transform: scale(1.2);
      }
    }
  }
}

// 移除旧的媒体查询
@media (max-width: 768px) {
  .main-footer {
    .footer-top {
      flex-direction: column;

      .footer-column,
      .footer-subscription {
        width: 100%;
      }
    }

    .footer-bottom {
      // 移除这部分，因为现在已经用a-row和a-col处理了
      // flex-direction: column;
      // gap: 15px;
      // text-align: center;
    }
  }
}
</style>
